<template>
  <div>
    <icon-nav
      :title="title"
      :label="extend.series.label"
      :isCharts="isCharts"
      @changeCharts="isCharts = isCharts?false:true"
      @clickSetting="$refs.setting.show()"
    ></icon-nav>
    <ve-histogram
      v-if="isCharts"
      :data="chartData"
      :settings="chartSettings"
      :height="height"
      :width="width"
      :extend="extend"
      :data-zoom="dataZoom"
    ></ve-histogram>
    <v-table v-else :chartData="chartData" :chartSettings="chartSettings"></v-table>
    <setting
      ref="setting"
      :title="'图表-'+title"
      :chartData="chartData"
      :chartSettings="chartSettings"
    ></setting>
  </div>
</template>
<script>
import setting from "./setting";
import VeLine from "v-charts/lib/line.common";
import veHistogram from "v-charts/lib/histogram.common";
import amap from "v-charts/lib/amap.common";
import vTable from "./table";
import iconNav from "./iconNav";

export default {
  components: {
    setting,
    veHistogram,
    vTable,
    iconNav
  },
  props: {
    title: {
      type: String,
      default: "3目标管控曲线"
    },
    dataList: {
      type: Array
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    }
  },
  data() {
    return {
      isCharts: true,
      extend: {
        series: {
          barMaxWidth: 20,
          label: {
            show: false,
            position: "top"
          }
        }
      },
      chartSettings: {
        showLine: [
          "productMarketingAimOfSales",
          "productMarketingOfSales",
          "productTCR",
          "marketingAimOF",
          "profitTSR",
          "profitTargetRate",
          "productProfitRate",
          "integratedTSR"
        ],
        axisSite: {
          right: [
            "productMarketingAimOfSales",
            "productMarketingOfSales",
            "productTCR",
            "marketingAimOF",
            "profitTSR",
            "profitTargetRate",
            "productProfitRate",
            "integratedTSR"
          ]
        },
        scale: true,
        yAxisName: ["", "%"],
        labelMap: {
          week: "日期",
          productSalesAim: "产品销量目标",
          productSalesVolume: "实际销量",
          productMarketingAim: "目标营销费用",
          productMarketing: "实际营销费用",
          productMarketingAimOfSales: "目标营销占比(%)",
          productMarketingOfSales: "实际营销占比(%)",
          productTCR: "销量TSR(%)",
          productMarketingAimOver: "营销费用余额",
          marketingAimOF: "营销费用超频率(%)",
          profitTarget: "净利目标",
          productProfit: "产品净利",
          profitTSR: "净利TSR(%)",
          profitTargetRate: "净利率目标(%)",
          productProfitRate: "产品净利率(%)",
          integratedTSR: "综合TSR(%)"
        }
      },
      chartData: {
        columns: [
          "week",
          "productSalesAim",
          "productSalesVolume",
          "integratedTSR"
        ],
        rows: []
      },
      dataZoom: {
        type: "slider",
        show: true,
        startValue: 10, //数据窗口范围的起始数值
        endValue: 0,
        height: 10,
        bottom: 40
      }
    };
  },
  watch: {
    dataList: {
      handler(newValue, oldValue) {
        let rows = newValue;
        this.chartData.rows = rows;
      },
      deep: true
    }
  }
};
</script>
